<template>
  <Transition enter-active-class="animate__fadeInRightBig" leave-active-class="animate__fadeOutRightBig">

    <div class="animate__animated vacation__state flex-1">
      <main>
        <UserState v-for="item in userInfos" :key="item.id" :item="item" />
      </main>
      <div class="vacation__state__footer">
        <el-pagination v-model="page.current" background layout="prev, pager, next" :total="page.total" class="mt-4"
          @next-click="nextPage" @prev-click="prevPage" @current-change="sendPage" />
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import UserState from './user_state.vue';
import { IUserInfo } from '@/types/user';
import { onMounted, ref } from 'vue';
import { getStaffListPageApi } from '@/api/userApi';
import { IPage } from '@/types/response';
const userInfos = ref<IUserInfo[]>([])

const page = ref<IPage>({ current: 1, size: 8, total: 0 })

onMounted(() => {
  sendPage()

})
function sendPage(e?: number) {
  page.value.current = e ?? 1;
  getStaffListPageApi(page.value).then(res => {
    userInfos.value = res.data.list;
    if (page.value.total == 0) {
      page.value.total = res.data.total;

    }
  })
}
function nextPage() {
  if (page.value.size * page.value.current >= page.value.total!) return;
  page.value.current++
  sendPage()

}
function prevPage() {
  if (page.value.current <= 0) return;
  page.value.current--;
  sendPage()

}
</script>

<style lang="scss" scoped>
.vacation__state {
  position: absolute;
  width: 100%;
  height: 100%;

  >main {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;


  }

  &__footer {
    display: flex;
    justify-content: flex-end;

    :deep(.el-pagination) {
      .el-pager {
        >li {
          height: 40px;
          width: 40px;
        }
      }
    }
  }
}
</style>